import * as React from 'react';
import { useModel } from 'umi';
import { PAD_STYLE } from '..';
import styles from './index.less';
import type { UserInfoType } from '..';

interface IUserInfoProps {
  data: UserInfoType;
}

const UserInfo: React.FunctionComponent<IUserInfoProps> = (props) => {
  const { padStyle, borderRadius, bgColor, fontColor, options, spacing } = props.data;
  const { initialState } = useModel('@@initialState');
  const { imgPrefix } = initialState || {};
  return (
    <div
      className={styles.userInfo}
      style={{
        width: padStyle === PAD_STYLE.withPad.value ? '355px' : '100%',
        borderRadius: borderRadius + 'px',
        backgroundColor: bgColor,
        marginTop: spacing,
      }}
    >
      <img
        className={styles.userHead}
        src={`${imgPrefix}/crmyumc/768479403501420544/member/202308221038125640.png`}
      />
      <div className={styles.userContent}>
        <div className={styles.userName}>
          <span
            className={styles.name}
            style={{
              color: fontColor,
            }}
          >
            微信昵称
          </span>
          {options.levelTag.isShow && (
            <div
              className={styles.userLevel}
              style={{
                background: options.levelTag.tagColor,
              }}
            >
              青铜会员
            </div>
          )}
        </div>
        <div className={styles.userCouponPoint}>
          <span
            className={styles.userCoupon}
            style={{
              color: fontColor,
            }}
          >
            优惠券：3
          </span>
          <span
            className={styles.userPoint}
            style={{
              color: fontColor,
            }}
          >
            积分：100
          </span>
        </div>
        {options.levelProgress.isShow && (
          <div className={styles.userProgress}>
            <div className={styles.progress}>
              <div
                className={styles.currentProgress}
                style={{
                  background: options.levelProgress.progressColor,
                }}
              >
                进度
              </div>
            </div>
            <span>
              <span
                className={styles.currentNum}
                style={{
                  color: fontColor,
                }}
              >
                50
              </span>
              <span
                className={styles.num}
                style={{
                  color: fontColor,
                }}
              >
                /100
              </span>
            </span>
          </div>
        )}
      </div>
      <div className={styles.userVipCode}>
        <img
          className={styles.code}
          src={`${imgPrefix}/crmyumc/768479403501420544/member/202308221037491614.png`}
        />
      </div>
    </div>
  );
};

export default UserInfo;
